<template>
  <div class="enterprise-home">
    <!-- Header section with adjusted layout and new dropdown -->
    <header class="header">
      <div class="header-container">
        <div class="header-left">
          <div class="nav-item" @click="goToApplications">
            <span>申请列表</span>
          </div>
        </div>
        
        <div class="header-center">
          <div class="logo" @click="goToHome">
            <span class="logo-text">
              <span class="logo-part-1">云启国际</span>
              <span class="logo-part-2">人才港</span>
            </span>
          </div>
        </div>
        
        <div class="header-right">
          <div class="nav-item" @click="goToTalentSearch">
            <span>人才库</span>
          </div>
        </div>
        <el-dropdown @command="handleMenuCommand" trigger="hover" class="menu-dropdown">
          <div class="menu-icon">
            <el-icon size="24"><OfficeBuilding /></el-icon>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="certification">
                <el-icon><Check /></el-icon>
                企业认证
              </el-dropdown-item>
              <el-dropdown-item command="talent-pool">
                <el-icon><User /></el-icon>
                人才库
              </el-dropdown-item>
              <el-dropdown-item command="applications">
                <el-icon><List /></el-icon>
                申请列表
              </el-dropdown-item>
              <el-dropdown-item divided command="logout">
                <el-icon><SwitchButton /></el-icon>
                退出
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </header>

    <!-- Hero section with updated background and gradient -->
    <section class="hero-section">
      <div class="hero-background">
        <div class="city-skyline"></div>
      </div>
      <div class="hero-content">
        <div class="hero-text">
          <img src="../../assets/images/login/首页字体.png" alt="发现国际精英 拓展全球商机" class="hero-title-image" />
        </div>
      </div>
    </section>

    <!-- 展示公告区域 -->
    <section class="announcement-section">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">展示公告</h2>
          <p class="section-subtitle">Display Announcement</p>
        </div>
      </div>
    </section>

    <!-- 底部滚动效果区域 -->
    <section class="scroll-section">
      <div class="scroll-container">
        <div class="scroll-content">
          <div class="scroll-item">
            <img src="../../assets/images/effects/2.png" alt="效果图2" />
          </div>
          <div class="scroll-item">
            <img src="../../assets/images/effects/3.png" alt="效果图3" />
          </div>
          <div class="scroll-item">
            <img src="../../assets/images/effects/4.png" alt="效果图4" />
          </div>
          <!-- 重复图片以实现无缝滚动 -->
          <div class="scroll-item">
            <img src="../../assets/images/effects/2.png" alt="效果图2" />
          </div>
          <div class="scroll-item">
            <img src="../../assets/images/effects/3.png" alt="效果图3" />
          </div>
          <div class="scroll-item">
            <img src="../../assets/images/effects/4.png" alt="效果图4" />
          </div>
        </div>
      </div>
    </section>

    <!-- Core Values section with updated layout and styling -->
    <section class="value-section">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">核心价值</h2>
          <p class="section-subtitle">Core Values</p>
        </div>
        <div class="value-cards">
          <div class="value-card">
            <div class="card-icon">
              <el-icon size="40"><User /></el-icon>
            </div>
            <h3>国际化人才库</h3>
            <p>汇聚50+国家留学生资源，满足企业多元化人才需求</p>
          </div>
          <div class="value-card">
            <div class="card-icon">
              <el-icon size="40"><Connection /></el-icon>
            </div>
            <h3>跨境贸易桥梁</h3>
            <p>搭建企业与留学生的直接沟通渠道，促进跨境贸易合作</p>
          </div>
          <div class="value-card">
            <div class="card-icon">
              <el-icon size="40"><OfficeBuilding /></el-icon>
            </div>
            <h3>专业撮合服务</h3>
            <p>平台专业团队人工审核与匹配，确保对接质量与成功率</p>
          </div>
          <div class="value-card">
            <div class="card-icon">
              <el-icon size="40"><Check /></el-icon>
            </div>
            <h3>品质保障体系</h3>
            <p>严格的企业认证与人才筛选机制，保障合作安全可靠</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Service Features section with enhanced styling -->
    <section class="service-section">
      <div class="container">
        <div class="service-grid">
          <div class="service-item">
            <h3 class="service-title">精准人才搜索系统</h3>
            <div class="service-card">
              <p>系统根据企业需求自动推荐最匹配的国际人才</p>
            </div>
          </div>
          
          <div class="service-item">
            <h3 class="service-title">专业撮合服务</h3>
            <div class="service-card">
              <p>平台先审核留学生资质,再评估与企业需求匹配度</p>
            </div>
          </div>
          
          <div class="service-item">
            <h3 class="service-title">跨境贸易合作支持</h3>
            <div class="service-card">
              <p>清晰展示企业贸易合作需求,吸引目标留学生</p>
            </div>
          </div>
          
          <div class="service-item">
            <h3 class="service-title">安全保障体系</h3>
            <div class="service-card">
              <p>从申请到对接,每一步都有明确状态提示</p>
            </div>
          </div>
          
          <div class="service-item">
            <h3 class="service-title">全方位服务体验</h3>
            <div class="service-card">
              <p>提供人才搜索与对接数据分析,优化招聘策略</p>
            </div>
          </div>
          
          <div class="service-item">
            <h3 class="service-title">品质保障体系</h3>
            <div class="service-card">
              <p>严格的企业认证与人才筛选机制，保障合作安全可靠</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 快速操作区 -->
    <section class="quick-actions">
      <div class="container">
        <div class="action-cards">
          <div class="action-card" @click="goToTalentSearch">
            <el-icon size="48"><Search /></el-icon>
            <h3>搜索人才</h3>
            <p>精准匹配国际人才</p>
          </div>
          
          <div class="action-card" @click="goToApplications">
            <el-icon size="48"><Document /></el-icon>
            <h3>查看申请</h3>
            <p>管理收到的申请</p>
          </div>
          
          <div class="action-card" @click="goToEnterpriseSpace">
            <el-icon size="48"><Setting /></el-icon>
            <h3>企业管理</h3>
            <p>完善企业信息</p>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useUserStore } from '../../store/modules/user'
import { useAuth } from '../../composables/useAuth'
import { 
  User, OfficeBuilding, Plus, Search, Check, Connection, 
  Setting, Document, Edit, List, InfoFilled, SwitchButton
} from '@element-plus/icons-vue'

const router = useRouter()
const userStore = useUserStore()
const { logout } = useAuth()

// 组件挂载时的逻辑
onMounted(() => {
  
})

// 导航方法
const goToHome = () => {
  router.push({ name: 'enterprise-home' })
}

const goToCertification = () => {
  router.push({ name: 'enterprise-certification' })
}



const goToTalentSearch = () => {
  router.push({ name: 'talent-search' })
}

const goToApplications = () => {
  router.push({ name: 'enterprise-applications' })
}

const goToEnterpriseSpace = () => {
  router.push({ name: 'enterprise-space' })
}

// 下拉菜单处理
const handleMenuCommand = (command) => {
  switch (command) {
    case 'certification':
      router.push({ name: 'enterprise-certification' })
      break
    case 'talent-pool':
      router.push({ name: 'talent-search' })
      break
    case 'applications':
      router.push({ name: 'enterprise-applications' })
      break
    case 'logout':
      handleLogout()
      break
  }
}

const handleLogout = () => {
  // 使用统一的认证composable
  logout()
  ElMessage.success('已退出登录')
  router.push('/login')
}

// 生命周期
onMounted(() => {
  
})
</script>

<style scoped>
/* 企业首页原有样式 */
.enterprise-home {
  width: 100%;
  background: #ffffff;
}

/* 顶部导航栏 */
.header {
  background: #9ba1a7;
  color: white;
  position: relative;
  z-index: 1000;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 60px;
}

.header-left {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-start;
  margin-right: 20px;
}

.header-center {
  flex: 1;
  display: flex;
  justify-content: center;
}

.header-right {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  margin-left: 40px;
  position: relative;
}

.nav-item {
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 6px;
  transition: all 0.3s ease;
  font-weight: 500;
  color: white;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.nav-item.active {
  background: rgba(255, 255, 255, 0.3);
  font-weight: 600;
}

.header-center .logo {
  cursor: pointer;
}

.logo-text {
  font-size: 1.4rem;
  font-weight: 600;
}

.logo-part-1 {
  color: white;
}

.logo-part-2 {
  color: #14b8a6;
}

.menu-icon {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 6px;
  transition: all 0.3s ease;
  color: white;
  background: rgba(255, 255, 255, 0.1);
}

.menu-icon:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.menu-dropdown {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  z-index: 1001;
}

/* 主视觉区域 */
.hero-section {
  background: url('../../assets/images/login/登录.png') no-repeat center 10%;
  background-size: cover;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(79, 4, 150, 0.54) 0%, rgba(5, 104, 243, 0.801) 50%, rgba(20, 184, 166, 0.54) 100%);
  z-index: 1;
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.city-skyline {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  margin-bottom: 60px;
}

.hero-text {
  margin-bottom: 0;
}

.hero-title-image {
  max-width: 100%;
  height: auto;
  max-height: 300px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* 展示公告区域 */
.announcement-section {
  padding: 60px 0;
  background: #fff;
}

/* 核心价值展示区 */
.value-section {
  padding: 80px 0;
  background: #f0f8ff;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.section-header {
  text-align: center;
  margin-bottom: 50px;
}

.section-title {
  font-size: 2.2rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 8px;
}

.section-subtitle {
  font-size: 1rem;
  color: #666;
  font-weight: 400;
}

.value-cards {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
  max-width: 1000px;
  margin: 0 auto;
}

.value-card {
  background: white;
  padding: 20px 15px;
  border-radius: 6px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  border: 1px solid #e8e8e8;
  flex: 1;
  min-width: 200px;
  max-width: 220px;
}

.value-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.card-icon {
  margin-bottom: 12px;
  color: #1976d2;
}

.value-card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
}

.value-card p {
  color: #666;
  line-height: 1.4;
  font-size: 0.9rem;
}

/* 服务特色区 */
.service-section {
  padding: 80px 0;
  background: #f0f8ff;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.service-item {
  text-align: center;
}

.service-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
}

.service-card {
  background: white;
  padding: 25px 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.service-card p {
  color: #333;
  line-height: 1.6;
  font-size: 0.95rem;
  margin: 0;
  text-align: center;
}

/* 功能特色区 */
.features-section {
  padding: 80px 0;
  background: #f8f9fa;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.feature-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
}

.feature-icon {
  color: #1976d2;
  flex-shrink: 0;
}

.feature-content h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
}

.feature-content p {
  color: #666;
  line-height: 1.6;
  font-size: 0.95rem;
}

/* 快速操作区 */
.quick-actions {
  padding: 80px 0;
  background: white;
}

.action-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.action-card {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding: 40px 30px;
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.action-card:hover {
  transform: translateY(-8px);
  border-color: #1976d2;
  background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
  color: white;
}

.action-card:hover .el-icon {
  color: white;
}

.action-card .el-icon {
  color: #1976d2;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

.action-card h3 {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: inherit;
}

.action-card p {
  font-size: 0.95rem;
  opacity: 0.8;
  color: inherit;
}

/* 底部滚动效果样式 */
.scroll-section {
  width: 100%;
  height: 300px;
  background: #fff;
  overflow: hidden;
  position: relative;
}

.scroll-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.scroll-content {
  display: flex;
  animation: scroll 20s linear infinite;
  height: 100%;
}

.scroll-item {
  flex-shrink: 0;
  width: 400px;
  height: 100%;
  margin-right: 30px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
  background: #fff;
}

.scroll-item:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
}

.scroll-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-container {
    padding: 0 15px;
    height: 50px;
  }
  
  .header-left {
    gap: 15px;
  }
  
  .nav-item {
    padding: 6px 12px;
    font-size: 0.9rem;
  }
  
  .logo-text {
    font-size: 1.1rem;
  }
  
  .hero-section {
    min-height: 100vh;
  }
  
  .hero-title-image {
    max-height: 250px;
  }
  

  
  .section-title {
    font-size: 2rem;
  }
  
  .value-cards {
    flex-direction: column;
    align-items: center;
  }
  
  .value-cards {
    max-width: 90%;
  }
  
  .value-card {
    min-width: 100%;
    max-width: 100%;
  }
  
  .features-grid {
    grid-template-columns: 1fr;
  }
  
  .feature-item {
    flex-direction: column;
    text-align: center;
  }
  
  .action-cards {
    grid-template-columns: 1fr;
  }
  
  .service-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  
  .service-card {
    min-height: 100px;
    padding: 20px 15px;
  }
  
  .scroll-item {
    width: 300px;
  }
  
  .scroll-section {
    height: 200px;
  }
}

@media (max-width: 480px) {
  .hero-title-image {
    max-height: 200px;
  }
  
  .service-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .service-card {
    min-height: 80px;
    padding: 15px 10px;
  }
  
  .value-card,
  .feature-item,
  .action-card {
    padding: 25px 20px;
  }
  
  .section-title {
    font-size: 1.8rem;
  }
}
</style> 